@import "tailwindcss";

/* Tailwind CSS v4.0 主题配置 */

/* 使用 @theme 指令定义主题颜色 - Tailwind v4.0 最佳实践 */
@theme {
  /* 浅色主题默认颜色 */
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-tertiary: #6b7280;
  --border: #e5e7eb;
  --accent-color: #3b82f6;
  --scrollbar-thumb: rgba(0, 0, 0, 0.1);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.2);
}

/* 深色主题变量覆盖 */
.dark {
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --bg-tertiary: #374151;
  --text-primary: #f9fafb;
  --text-secondary: #e5e7eb;
  --text-tertiary: #9ca3af;
  --border: #4b5563;
  --accent-color: #60a5fa;
  --scrollbar-thumb: rgba(255, 255, 255, 0.1);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
}

/* 蓝色主题变量覆盖 */
.blue {
  --bg-primary: #eff6ff;
  --bg-secondary: #dbeafe;
  --bg-tertiary: #bfdbfe;
  --text-primary: #1e3a8a;
  --text-secondary: #1e40af;
  --text-tertiary: #3b82f6;
  --border: #93c5fd;
  --accent-color: #2563eb;
  --scrollbar-thumb: rgba(0, 0, 0, 0.1);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.2);
}

/* 基础重置样式 */
@layer base {
  * {
    @apply box-border;
  }
  
  html {
    @apply h-full;
  }
  
  body {
    @apply m-0 p-0 min-h-full font-sans transition-colors duration-300;
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }
}

/* 自定义工具类 - 使用 CSS 变量实现主题切换 */
@layer utilities {
  /* 主题背景颜色 */
  .bg-primary {
    background-color: var(--bg-primary);
  }
  
  .bg-secondary {
    background-color: var(--bg-secondary);
  }
  
  .bg-tertiary {
    background-color: var(--bg-tertiary);
  }
  
  /* 主题文本颜色 */
  .text-primary {
    color: var(--text-primary);
  }
  
  .text-secondary {
    color: var(--text-secondary);
  }
  
  .text-tertiary {
    color: var(--text-tertiary);
  }

  /* 主题边框颜色 */
  .border-color {
    border-color: var(--border);
  }

  /* 主题强调色 */
  .accent-color {
    color: var(--accent-color);
  }

  /* 主题卡片样式 - 使用 CSS 嵌套语法 */
  .theme-card {
    @apply border rounded-lg shadow-sm transition-all;
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    
    &:hover {
      @apply shadow-md;
    }
  }
  
  /* 主题按钮样式 */
  .theme-button {
    @apply px-4 py-2 rounded-md transition-opacity;
    background-color: var(--accent-color);
    color: white;
    
    &:hover {
      opacity: 0.9;
    }
    
    &:active {
      opacity: 1;
    }
  }
}

/* Element Plus 组件主题适配 - 使用 CSS 变量和嵌套 */
@layer components {
  /* 按钮组件 */
  .el-button {
    @apply transition-colors duration-300;
  }
  
  .el-button--primary {
    background-color: var(--accent-color);
    color: white;
    
    &:hover {
      @apply opacity-90;
    }
  }
  
  .el-button--default {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    border-color: var(--border);
  }
  
  /* 卡片组件 */
  .el-card {
    background-color: var(--bg-primary);
    border-color: var(--border);
    @apply border transition-colors duration-300;
  }
  
  .el-card__header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border);
    @apply border-b;
  }
  
  .el-card__body {
    background-color: var(--bg-primary);
  }
  
  /* 输入框组件 */
  .el-input__wrapper {
    background-color: var(--bg-secondary);
    border-color: var(--border);
    @apply border transition-colors duration-300;
  }
  
  .el-input__inner {
    color: var(--text-primary);
  }
  
  /* 下拉菜单组件 */
  .el-dropdown-menu {
    background-color: var(--bg-primary);
    border-color: var(--border);
    @apply border;
  }
  
  .el-dropdown-item {
      color: var(--text-primary);
      @apply transition-colors duration-300;
      
      &:hover {
        background-color: var(--bg-secondary);
      }
    }
  
  /* 表格组件 */
  .el-table {
    background-color: var(--bg-primary);
    border-color: var(--border);
    @apply border;
  }
  
  .el-table__header-wrapper {
    background-color: var(--bg-secondary);
  }
  
  .el-table__row {
      @apply transition-colors duration-300;
      
      &:hover {
        background-color: var(--bg-secondary);
      }
    }
  
  /* 对话框组件 */
  .el-dialog__wrapper {
    @apply bg-black/50 backdrop-blur-sm;
  }
  
  .el-dialog {
    background-color: var(--bg-primary);
    border-color: var(--border);
    @apply border;
  }
  
  .el-dialog__header {
    border-bottom-color: var(--border);
    @apply border-b;
  }
  
  /* 消息提示组件 */
  .el-message {
    background-color: var(--bg-primary);
    border-color: var(--border);
    @apply border;
  }
  
  /* 图标组件 */
  .el-icon {
    color: var(--text-secondary);
  }
}

body {
  height: 100%;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

#app {
  height: 100%;
}

/* 导航栏样式 */
.navbar {
  background-color: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

/* 侧边栏样式 */
.sidebar {
  background-color: var(--bg-secondary);
  border-right: 1px solid var(--border);
}

/* 卡片样式 - 通用 */
.theme-card {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-primary);
}

/* 按钮样式 */
.theme-button {
  background-color: var(--accent-color);
  color: white;
  border: 1px solid var(--border-color);
}

.theme-button:hover {
  opacity: 0.9;
}

/* Element Plus 组件主题样式 */

/* el-card 主题样式 */
.el-card {
  --el-card-bg-color: var(--bg-tertiary);
  --el-card-border-color: var(--border);
  --el-card-text-color: var(--text-primary);
}

.el-card__header {
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.el-card__body {
  color: var(--text-secondary);
}

/* el-button 主题样式 */
.el-button--primary {
  --el-button-bg-color: var(--accent-color);
  --el-button-border-color: var(--accent-color);
}

.el-button--default {
  --el-button-bg-color: var(--bg-tertiary);
  --el-button-text-color: var(--text-primary);
  --el-button-border-color: var(--border);
}

/* el-input 主题样式 */
.el-input__wrapper {
  --el-input-bg-color: var(--bg-tertiary);
  --el-input-text-color: var(--text-primary);
  --el-input-border-color: var(--border);
}

.el-input__inner {
  color: var(--text-primary);
}

/* el-select 主题样式 */
.el-select {
  --el-select-border-color: var(--border);
  --el-select-text-color: var(--text-primary);
  --el-select-placeholder-color: var(--text-tertiary);
}

/* el-dropdown 主题样式 */
.el-dropdown-menu {
  --el-dropdown-menu-bg-color: var(--bg-tertiary);
  --el-dropdown-menu-border-color: var(--border);
  --el-dropdown-menu-text-color: var(--text-primary);
  --el-dropdown-menu-hover-bg-color: var(--bg-secondary);
}

/* el-menu 主题样式 */
.el-menu {
  --el-menu-bg-color: var(--bg-secondary);
  --el-menu-text-color: var(--text-primary);
  --el-menu-hover-text-color: var(--accent-color);
  --el-menu-border-color: var(--border);
}

.el-menu-item {
  --el-menu-item-hover-bg-color: var(--bg-tertiary);
}

/* 确保主题切换时的平滑过渡 */
* {
  transition: 
    background-color 0.3s ease, 
    color 0.3s ease, 
    border-color 0.3s ease, 
    --el-card-bg-color 0.3s ease, 
    --el-card-border-color 0.3s ease, 
    --el-card-text-color 0.3s ease;
}
